<template>
    <div id="passport">
        <div class="row">
            <div class="col-md-12">
                <condition @getPassportCondition="getCondition"></condition>
            </div>
        </div>        
        <div class="row">
            <div class="col-md-12">
                <el-table :data="shows" size="small" border style="width: 100%">
                    <el-table-column sortable fixed align="center" prop="ShowId" label="编号" width="80"></el-table-column>
                    <el-table-column align="center" fixed prop="PassportNo" label="通行证" width="150"></el-table-column>
                    <el-table-column align="center" fixed prop="Team.Name" label="团队名称" width="200"></el-table-column>
                    <el-table-column align="center" label="领队姓名" width="120">
                        <template slot-scope="scope">
                            <user-detail :user="scope.row.Team.Leader.User"></user-detail>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="团队成员" width="350">
                        <template slot-scope="scope">
                            <div v-for="(member, index) in scope.row.Team.Members" style="display: inline;">
                                <user-detail :user="member.User"></user-detail>
                                <span v-if="index < scope.row.Team.Members.length-1">, </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="参演人数" width="100">
                        <template slot-scope="scope">
                            <span>{{scope.row.Team.Members.length}} 人</span>
                        </template>
                    </el-table-column>                    
                    <el-table-column align="center" label="音乐会" width="130">
                        <template slot-scope="scope">
                            <span>{{ concertFormat(scope.row.Concert) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" label="演出项目" width="130">
                        <template slot-scope="scope">
                            <span>{{ eventFormat(scope.row.ShowEvent) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" prop="MusicName" label="演出曲目" width="120"></el-table-column>
                    <el-table-column align="center" prop="Composer" label="作曲" width="100"></el-table-column>
                    <el-table-column align="center" prop="Arranger" label="编曲" width="100"></el-table-column>
                    <el-table-column align="center" prop="Accompany" label="伴奏" width="100"></el-table-column>
                    <el-table-column align="center" prop="ShowTime" label="演出" width="100"></el-table-column>
                    <el-table-column align="center" label="创建时间" width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>    
    </div>
</template>

<script>

import Condition from './condition.vue';
import UserDetail from 'views/user/user_detail.vue';
import {DeepClone, ShowSuccess, TimeFormat} from 'web/utils';

export default {
    components: {
        Condition,
        UserDetail
    },
    filters: {
        time: TimeFormat
    },
    data() {
        return {
            shows: [],
            pageCount: 0,
            pageSize: 10,
            condition: { },
            words: {
                events: {}
            }
        }
    },
    mounted() {

        // 加载词语
        this.$DataService.GetWordDictByCode('ENSEMBLE_COMPETE_EVENT')
            .then(ret => {
                this.words.events = ret;
            });
    },
    methods: {

        eventFormat: function(val) {
            if (val == 'TREMOLO_SOLO_OPEN') val = 'TREMOLO_SOLO';
            if (val == 'CHROMATIC_SOLO_OPEN') val = 'CHROMATIC_SOLO';
            return this.words.events[val];
        },

        concertFormat: function(val) {
            return {
                'OPEN_STAGE': '公开舞台',
                'TEENAGE_CONCERT': '青少年音乐会',
                'FAMOUS_CONCERT': '名家音乐会',
                'MASTER_CONCERT': '大师音乐会'
            }[val];
        },

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$ShowService.QueryShows(this.condition, val, this.pageSize)
                .then(ret => {
                    this.shows = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            var _condition = DeepClone(condition);
            if (_condition.Events) {
                // 处理特殊的公开组演出
                if (_condition.Events.findIndex(v => v == 'TREMOLO_SOLO') > -1) {
                    _condition.Events.push('TREMOLO_SOLO_OPEN');
                }
                if (_condition.Events.findIndex(v => v == 'CHROMATIC_SOLO') > -1) {
                    _condition.Events.push('CHROMATIC_SOLO_OPEN');
                }
            }
            Promise.all([
                this.$ShowService.QueryShowsCount(_condition),
                this.$ShowService.QueryShows(_condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.shows = ret[1];
            });
        },

        formatLocation(country, province) {
            return LocationStringFormat(country, province);
        }
    }
}
</script>

<style>

</style>
